<template>
    <div>
        <h2>预约设置</h2>
        <div class="box">

            <div class="operatingBox">
                <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
                <el-button type="success" size="small" @click="addRecipient()">+新增接收人</el-button>
            </div>
            <div class="operating">
                <el-input placeholder="查找..." class="search-input" v-model="searchInput" >
                    <el-button slot="append" icon="el-icon-search" @click="search(searchInput)"></el-button>
                </el-input>
            </div>
        </div>

        <!-- 表格 -->
        <el-table ref="singleTable" :data="currentList" tooltip-effect="dark" style="width: 100%" @select="selectChange"
             v-if="isShow">
            <el-table-column  type="selection" width="55" ></el-table-column>
            <el-table-column prop="department" label="部门" width="120">
            </el-table-column>
            <el-table-column prop="name" label="真实姓名" width="120"> </el-table-column>
            <el-table-column prop="username" label="用户名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="role" label="角色" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="tel" label="电话" show-overflow-tooltip>
            </el-table-column>
        </el-table>


        <!-- 分页 -->
        <div class="block">
            <Pagination :total="total" :pageSize="pagesize" @getPagination="getPagination"></Pagination>
        </div>


    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
    components: {
    Pagination
  },
    data() {
        return {
            currentList: {},
            selectionList:{},
            currentPage: 1,
            pagesize: 10,
            searchInput: "",
            isShow: false,
            total:0
        }
    },
    created() {
        this.render()
    },
    methods: {

        //渲染
        async render() {
            await this.$api.appointment.findUserList({
                pageSize:this.pagesize,
                currentPage:this.currentPage
            }).then((res) => {
                //有数据后修改处
                this.total = res.data.data.total
                this.currentList = this.dataRewrite(res.data.data.list)
                console.log(res)
            })
            this.isShow = true
        },

        selectChange(selection) {
            if (selection.length > 1) {
                const del_row = selection.shift()
                this.$refs.singleTable.toggleRowSelection(del_row, false)
            }
            this.selectionList=selection
            console.log(this.selectionList[0].id)

        },
        headerCellStyle({ column, columnIndex }) {
            if (columnIndex === 0) {
                return 'hiddenCheck'
            }
        },
        goBack() {
            this.$router.push("/appointment/addSetting")
        },


        addRecipient(){
            this.$router.push({
                path:"/appointment/addSetting",
                query:{
                    userId:this.selectionList[0].id,
                    appointmentHolder:this.selectionList[0].name
                }
            })

        },
        //模糊查询
        search(value){
            if(value === ""){
                this.render()
            }else{
                this.$api.appointment.findUserByName({
                    pageSize:this.pagesize,
                    currentPage:this.currentPage,
                    realName:value
                }).then((res) => {
                    this.total = res.data.data.total
                    this.currentList = this.dataRewrite(res.data.data.list)
                })
            }
        },

    async getPagination(page){
      this.currentPage = page
      await this.$api.appointment.findUserList({
       pageSize: this.pagesize,
       currentPage: this.currentPage
      }).then((res) => {
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        console.log(res)
      })
    },

        //数据处理
        dataRewrite(list) {
            return list.map(item => ({
                id: item.id,
                department: item.departmentName,
                name:item.realName,
                username:item.username,
                role:item.occupationName,
                tel:item.phoneNum
            }))
        }
    }
}
</script>

<style lang="less" scoped
>
::v-deep .el-table__header .el-table-column--selection {
    visibility: hidden;
}

h2 {
    margin: 15px;
}

.box {
    background-color: white;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.operating {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.search-input {
    width: 200px;
    float: right;
}

.reserve-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
